<template>
  <a-modal :title="title"
           :visible.sync="dialogVisible"
           width="60%"
           :append-to-body="true"
           destroyOnClose
           @cancel="dialogVisible=false"
           class="condition-dialog">
    <!-- 头部 -->
    <slot name="header"
          :value-copy="valueCopy">
      <div v-if="isPriority">
        <a-form layout="inline">
          <!-- 条件名称 -->
          <a-form-item label="条件名称">
            <a-input class="name"
                     v-model="valueCopy.name" />
          </a-form-item>
          <!-- 优先级 -->
          <!-- 条件名称 -->
          <a-form-item label="优先级">
            <a-input v-model="valueCopy.orderNo" />
          </a-form-item>
        </a-form>
      </div>
    </slot>
    <!-- 分割线 -->
    <a-divider />
    <!-- 内容 -->
    <a-row class="condition-set"
           :gutter="40">
      <a-col :span="24">
        <a-row class="set-label"
               v-if="!onlyAnd">
          <a-col :span="3">
            <!-- 添加条件组 -->
            <a-button type="primary"
                      @click="addConditionGroup()">{{ buttonName }}</a-button>
          </a-col>
          <a-col style="margin-top:8px;text-align: right;"
                 :span="20">
            <!-- <label>{{ label }}</label> -->
            <a-radio-group v-model="valueCopy.type">
              <a-radio :value="'1'">且条件</a-radio>
              <a-radio :value="'2'">或条件</a-radio>
            </a-radio-group>
          </a-col>
        </a-row>
        <a-row ref="conditionPand">
          <a-col :span="24"
                 v-for="(listItem,index) in valueCopy.conditions"
                 :key="index"
                 style="margin-bottom:20px;position: relative;">
            <a-icon type="delete"
                    class="ant-icon-delete"
                    v-show="valueCopy.conditions.length > 1"
                    @click="valueCopy.conditions.splice(index, 1)" />
            <ConditionAdd :value="listItem"
                          ref="ConditionAdd"
                          :only-and="onlyAnd"
                          @rowText="rowText => setText(rowText,index)"
                          @verifyInfoFun="verifyInfoFun"
                          :list="List_">
            </ConditionAdd>
          </a-col>
        </a-row>
        <a-row>
          <span v-if="verifyInfo"
                style="color:red;padding:0 0 10px 20px">请先完整填写以上信息</span>
        </a-row>
        <p v-show="remark.show"> {{ remark.text }} </p>
      </a-col>
    </a-row>
    <span slot="footer"
          class="dialog-footer">
      <a-button @click="close">取 消</a-button>
      <a-button type="primary"
                @click="confirm">确 定</a-button>
    </span>
  </a-modal>
</template>

<script>
import ConditionAdd from './ConditionAdd.vue'
const cloneDeep = require('clone')
export default {
  name: 'ZConditionDialog',
  components: {
    ConditionAdd
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          type: '1',
          orderNo: '1',
          conditions: [
            {
              type: '1',
              orderNo: '1',
              specifics: [
                {
                  // 字段名
                  filed: undefined,
                  // 字段类型
                  dataType: '',
                  // 表达式
                  operator: undefined,
                  // 比较值
                  value: '',
                  // 排序号
                  orderNo: '1',
                  // 自定义类型为2,其他类型为1
                  type: '1'
                }
              ]
            }
          ]
        }
      }
    },
    list: {
      type: Array,
      default: () => []
    },
    label: {
      type: String,
      default: '条件组关系:'
    },
    buttonName: {
      type: String,
      default: '添加条件组'
    },
    title: {
      type: String,
      default: '条件判断'
    },
    isPriority: {
      type: Boolean,
      default: false
    },
    // 当此属性为true的时候 隐藏多个组操作
    onlyAnd: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      List_: [],
      valueCopy: {},
      dialogVisible: false,
      verifyInfo: false,
      // 描述信息的缓存
      remarkCache: {},
      // 描述信息
      remark: {
        show: true,
        text: '123123'
      }
    }
  },
  watch: {
    list: {
      handler (newValue) {
        this.List_ = newValue
      },
      deep: true,
      immediate: true
    },
    value: {
      handler (newValue) {
        if (newValue) {
          this.valueCopy = cloneDeep(newValue)
        } else {
          this.valueCopy = {
            type: '1',
            orderNo: '1',
            conditions: [
              {
                type: '1',
                orderNo: '1',
                specifics: [
                  {
                    // 字段名
                    filed: undefined,
                    // 字段类型
                    dataType: '',
                    // 表达式
                    operator: undefined,
                    // 比较值
                    value: '',
                    // 排序号
                    orderNo: '1',
                    // 自定义类型为2,其他类型为1
                    type: '1'
                  }
                ]
              }
            ]
          }
        }
      },
      deep: true,
      immediate: true
    },
    valueCopy: {
      handler (newValue) {
        // 处理条件说明文本
        this.handleRemarkText(newValue)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    verifyInfoFun (value) {
      this.verifyInfo = value
    },
    confirm () {
      const arr = this.valueCopy.conditions
      const list = arr[arr.length - 1].specifics
      this.$refs.ConditionAdd[0].verify(list, (verify) => {
        if (verify) {
          this.emit(this.valueCopy)
          this.close()
        }
      })
    },
    close () {
      this.remarkCache = {}
      this.dialogVisible = false
    },
    open () {
      this.remarkCache = {}
      this.remark.text = ''
      this.dialogVisible = true
    },
    emit (value) {
      value.translate = this.remark.text
      this.$emit('input', value)
      this.$emit('change', value)
    },
    setText (rowText, index) {
      /** 缓存数据 */
      // 初始化第一层
      if (!this.remarkCache[index]) {
        this.remarkCache[index] = {}
      }
      this.remarkCache[index][rowText.key] = rowText.text
      this.handleRemarkText(this.valueCopy)
    },
    // 处理条件说明文本
    handleRemarkText (value) {
      this.$set(this.remark, 'text', '')
      // 如果一条数据都没有则不展示
      if (!this.remarkCache['0'] || !this.remarkCache['0']['0']) {
        this.$set(this.remark, 'show', false)
        return
      }

      // 如果只有一条数据就不加括号
      if (value.conditions.length < 2 && value.conditions[0].specifics.length < 2) {

      } else {

      }

      let level1Text = ''
      // 外层关系
      const type1 = value.type == '1' ? '并且 ' : '或者 '
      // 循环第一层
      value.conditions.forEach((condition, i) => {
        let text = ''
        // 循环第二层
        // 内层关系
        const type2 = condition.type == '1' ? '并且 ' : '或者 '
        condition.specifics.forEach((row, j) => {
          let str = ''
          // 如果只有一个就不加括号
          if (j > 0) {
            str += type2
          }
          str += `${this.remarkCache[i][j] || ''} `
          text += str
        })
        // 如果只有一条就不加括号
        if (value.conditions.length < 2) {
          level1Text += text
        } else {
          if (i > 0) {
            level1Text += type1
          }
          level1Text += `(${text}) `
        }
      })
      this.$set(this.remark, 'show', true)
      this.$set(this.remark, 'text', level1Text)
    },
    clear () {
      this.valueCopy = {
        type: '1',
        conditions: []
      }
      this.emit(this.valueCopy)
    },
    addConditionGroup () {
      const arr = this.valueCopy.conditions
      if (arr.length == 0) {
        this.valueCopy.conditions.push({
          type: '1',
          orderNo: '0',
          specifics: [
            {
              // 字段名
              filed: '',
              // 字段类型
              dataType: '',
              // 表达式
              operator: undefined,
              // 比较值
              value: '',
              // 排序号
              orderNo: '1',
              // 自定义类型为2
              type: '1'
            }
          ]
        })
      } else {
        const list = arr[arr.length - 1].specifics
        this.$refs.ConditionAdd[0].verify(list, (verify) => {
          if (verify) {
            this.valueCopy.conditions.push({
              type: '1',
              orderNo: (Number(arr[arr.length - 1].orderNo) + 1) + '',
              specifics: [
                {
                  // 字段名
                  filed: '',
                  // 字段类型
                  dataType: '',
                  // 表达式
                  operator: undefined,
                  // 比较值
                  value: '',
                  // 排序号
                  orderNo: '1',
                  // 自定义类型为2
                  type: '1'
                }
              ]
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.name {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  &:focus {
    box-shadow: none;
  }
}
.condition-dialog {
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #eaeefb;
  }
  ::v-deep .el-dialog__body {
    padding: 20px;
    max-height: 500px;
    overflow-y: auto;
  }
  ::v-deep .el-dialog__footer {
    border-top: 1px solid #eaeefb;
    padding: 20px;
  }
}
.condition-set {
  background: #fff;
  .ant-icon-delete {
    background: #1890ff;
    padding: 6px;
    font-size: var(--font-size-18);
    color: #fff;
    position: absolute;
    top: -15px;
    right: -20px;
    z-index: 100;
    cursor: pointer;
  }
  .set-label {
    padding: 20px;
    label {
      font-size: 14px;
      padding-right: 40px;
    }
  }
}
</style>
